<template>
  <div>
    <VxeTableVue
      ref="tableEl"
      module-name="故障代码"
      :queryFormData="state.formData"
      :column-config="columnConfig"
      data-list-api="/fault/faultCode/page"
      delete-api="/fault/faultCode"
      update-or-add-api="/fault/faultCode"
      add-permi="fault-code-add"
      del-permi="fault-code-del"
      update-permi="fault-code-update"
      :add-data="state.addItemData"
      :dialog-form-rules="rules"
      :dialog-width="600"
      :show-action-column="hasPermi(['fault-code-update', 'fault-code-del'])"
      @before-open-dialog="onBeforeOpenDialog"
    >
      <!------------------------------------------ 查询 ------------------------------------------------------->

      <template #queryItem>
        <el-form-item label="故障代码" prop="faultCode" class="mgr30">
          <el-input v-model="state.formData.faultCode" placeholder="故障代码" clearable />
        </el-form-item>
        <el-form-item label="故障名称" prop="faultName" class="mgr30">
          <el-input v-model="state.formData.faultName" placeholder="故障名称" clearable />
        </el-form-item>
        <el-form-item label="故障描述" prop="faultDesc" class="mgr30">
          <el-input v-model="state.formData.faultDesc" placeholder="故障描述" clearable />
        </el-form-item>
      </template>

      <!------------------------------------------ 新增修改 ------------------------------------------------------->

      <template #dialogUpdateOrAdd="{ row }: SlotFaultCode">
        <el-row class="flex">
          <el-form-item label="故障代码" prop="faultCode" class="mgr30 flex1">
            <el-input v-model="row.faultCode" placeholder="故障代码" clearable />
          </el-form-item>
        </el-row>
        <el-row class="flex">
          <el-form-item label="故障设备" prop="faultDeviceCode" class="mgr30 flex1">
            <el-input v-model="row.faultDeviceCode" placeholder="故障设备" clearable />
          </el-form-item>
        </el-row>
        <el-row class="flex">
          <el-form-item label="设备位置" prop="faultDeviceLocation" class="mgr30 flex1">
            <el-input v-model="row.faultDeviceLocation" placeholder="设备位置" clearable />
          </el-form-item>
        </el-row>
        <el-row class="flex">
          <el-form-item label="故障名称" prop="faultName" class="mgr30 flex1">
            <el-input v-model="row.faultName" placeholder="故障名称" clearable />
          </el-form-item>
        </el-row>
        <el-row class="flex">
          <el-form-item label="故障描述" prop="faultDesc" class="mgr30 flex1">
            <el-input v-model="row.faultDesc" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="故障描述" clearable />
          </el-form-item>
        </el-row>
      </template>
    </VxeTableVue>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { type VxeTableViewInstance, VxeTableVue } from '@/components/table'
  import { columnConfig, type IFaultCodeEntity } from './config'
  import { hasPermi } from '@/utils'

  type SlotFaultCode = { row: IFaultCodeEntity }

  const tableEl = ref<VxeTableViewInstance>()

  const initAddData = (): Partial<IFaultCodeEntity> => {
    return {
      faultCode: '',
      faultName: '',
      faultDesc: '',
      faultDeviceCode: '',
      faultDeviceLocation: ''
    }
  }

  const state = reactive({
    formData: {
      faultCode: '',
      faultName: '',
      faultDesc: ''
    } as Partial<IFaultCodeEntity>,
    addItemData: initAddData()
  })

  const rules = {
    faultCode: [{ required: true, message: '请输入故障代码', trigger: 'blur' }],
    faultDeviceCode: [{ required: true, message: '请输入故障设备', trigger: 'blur' }],
    faultDeviceLocation: [{ required: true, message: '请输入故障设备位置', trigger: 'blur' }],
    faultName: [{ required: true, message: '请输入故障名称', trigger: 'blur' }],
    faultDesc: [{ required: true, message: '请输入故障描述', trigger: 'blur' }]
  }

  /**----------------------------methods----------------------------------------------------------------------- */

  const onBeforeOpenDialog = (type: 'add' | 'update') => {
    if (type === 'add') state.addItemData = initAddData()
  }

  /**----------------------------lifecycle----------------------------------------------------------------------- */
</script>

<style scoped></style>
